<template>
  <a-drawer :bordered="false"
            :visible="visible"
            :closable="true"
            :width="drawerWidth"
            @close="close"
            :title="title"
            :wrapStyle="{overflow: 'auto',paddingBottom: '108px'}"
  >

    <a-spin :spinning="loading">
      <a-form>
        <a-form-item label='所关联的部门'>
          <a-tree
            checkable
            @check="onCheck"
            :checkedKeys="checkedKeys"
            :treeData="treeData"
            @expand="onExpand"
            @select="onTreeNodeSelect"
            :selectedKeys="selectedKeys"
            :expandedKeys="expandedKeysss"
            :checkStrictly="checkStrictly"
          >
              <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
                {{ slotTitle }}
                <a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
              </span>
          </a-tree>
        </a-form-item>
      </a-form>
    </a-spin>
    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <!-- 简化Tree逻辑，使用默认checkStrictly为false的行为，即默认父子关联
          <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
          -->
          <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>
          树操作 <a-icon type="up" />
        </a-button>
      </a-dropdown>
      <div v-show="!disableSubmit">
        <a-button type="primary" :loading="loading" @click="handleSubmit">确定</a-button>
        <a-button  @click="handleCancel">取消</a-button>
      </div>
    </div>

  </a-drawer>
</template>

<script>
  import {queryPermissionTreeList,queryDepartPermission,savePdDepartPermission} from '@/api/api'
  import { getAction } from  '@/api/manage'

  export default {
    name: 'DepartModal',
    data(){
      return {
        drawerWidth:800,
        treeData: [],
        disableSubmit:false,
        defaultCheckedKeys:[],
        checkedKeys:[],
        halfCheckedKeys:[],
        expandedKeysss:[],
        allTreeKeys:[],
        autoExpandParent: true,
        departIds: "",
        departNameMap: {},
        checkStrictly: false,
        title:"",
        visible: false,
        loading: false,
        selectedKeys:[]
      }
    },
    methods: {
      onTreeNodeSelect(id){
        if(id && id.length>0){
          this.selectedKeys = id
        }
      },
      onCheck (checkedKeys, { halfCheckedKeys }) {
        // 保存选中的和半选中的，后面保存的时候合并提交
        this.checkedKeys = checkedKeys
        this.halfCheckedKeys = halfCheckedKeys
      },
      show(departIds){
        this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
        this.visible = true;
        this.departIds = departIds;
        this.loadData();
      },
      close () {
        this.reset()
        this.$emit('close');
        this.visible = false;
        this.departIds = "";
        this.departNameMap = {};
      },
      onExpand(expandedKeys){
        this.expandedKeysss = expandedKeys;
        this.autoExpandParent = false
      },
      reset () {
        this.expandedKeysss = []
        this.checkedKeys = []
        this.defaultCheckedKeys = []
        this.loading = false
      },
      expandAll () {
        this.expandedKeysss = this.allTreeKeys
      },
      closeAll () {
        this.expandedKeysss = []
      },
      checkALL () {
        this.checkedKeys = this.allTreeKeys
      },
      cancelCheckALL () {
        this.checkedKeys = []
      },
      handleCancel () {
        this.close()
      },
      handleSubmit() {
        let that = this;
        //修复树节点bug 2021年1月11日09:39:26 zxh
        //let checkedKeys = [...that.checkedKeys, ...that.halfCheckedKeys]
        const departIds = that.checkedKeys.join(",");
        if(that.checkedKeys.length>0){
          const departArrays = [];
          for(let i=0;i<that.checkedKeys.length;i++){
            departArrays.push(this.departNameMap[that.checkedKeys[i]]);
          }
          this.$emit('ok', departArrays,departIds);
          this.close();
        }else{
          this.$message.warning("请选择部门");
        }

      },

      emptyCurrForm() {
        this.form.resetFields()
      },
      loadData(){
        this.loading = true;
        getAction("/pd/pdDepart/queryTreeListByParam").then((res)=>{
          this.treeData = res.result.treeList;
          let departNameMap = {};
          this.treeData.forEach(item => {
            let key = item.departName;
            departNameMap[item.id] = key;
          });
          this.departNameMap = departNameMap;
          this.allTreeKeys = res.result.ids;
          if(this.departIds!=""){
            const ids = this.departIds.split(",");
            this.checkedKeys = ids;
          }
          this.loading = false;
        })
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize(){
        let screenWidth = document.body.clientWidth;
        if(screenWidth < 500){
          this.drawerWidth = screenWidth;
        }else{
          this.drawerWidth = 700;
        }
      },
    },
  }
</script>

<style scoped>
  .ant-btn {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
  }
  .drawer-bootom-button {
    position: absolute;
    /*top:95%;*/
    bottom: -30px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
    z-index:199;
  }
</style>